<template>
  <div class="work-record-header">
    <el-row>
      <!-- 搜索部分 -->
      <el-form
        ref="workRecordForm"
        :inline="true"
        :model="formInline"

        label-width="100px">
        <el-form-item :label="$t('handlerId')">
          <el-select v-model="formInline.eqp1Id" clearable filterable>
            <el-option
              v-for="i in handleList"
              :key="i.id"
              :label="i.name"
              :value="i.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('timeInterval')" prop="trackinTime">
          <el-date-picker
            v-model="trackinTime"
            :default-time="['00:00:00','23:59:59']"
            :start-placeholder="$t('startTime')"
            :end-placeholder="$t('endTime')"
            type="daterange"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
          />
        </el-form-item>
        <el-form-item :label="$t('lotId')">
          <el-input
            v-model="formInline.lotId"
            placeholder
            clearable
          />
        </el-form-item>
        <el-form-item v-show="!show">
          <el-button type="primary" icon="el-icon-search" @click="doSearch">{{
            $t("search")
          }}</el-button>
        </el-form-item>
        <el-form-item v-show="!show">
          <span class="el-dropdown-link" @click="show = !show">
            {{ $t("expand") }}
            <i class="el-icon-arrow-down el-icon--right"/>
          </span>
        </el-form-item>
      </el-form>
      <el-collapse-transition>
        <div v-show="show">
          <el-form
            ref="ruleForm"
            :inline="true"
            :model="formInline"

            label-width="100px"
          >
            <el-form-item :label="$t('workOrder')">
              <el-input
                v-model="formInline.workOrder"
                placeholder
                clearable
              />
            </el-form-item>
            <el-form-item :label="$t('testProgramName')">
              <el-input v-model="formInline.trProgram" placeholder clearable/>
            </el-form-item>
            <el-form-item :label="$t('productName')">
              <el-input
                v-model="formInline.productName"
                placeholder
                clearable
              />
            </el-form-item>
            <el-form-item :label="$t('customerLotId')">
              <el-input v-model="formInline.custLotId" placeholder clearable/>
            </el-form-item>
            <el-form-item :label="$t('custName')">
              <el-input v-model="formInline.custName" placeholder clearable/>
            </el-form-item>

            <el-form-item :label="$t('testerId')">
              <el-select
                v-model="formInline.testerId"
                clearable
                filterable
                @change="getHeadidList"
              >
                <el-option
                  v-for="i in testList"
                  :key="i.id"
                  :label="i.name"
                  :value="i.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('eqpheadids')">
              <el-select v-model="formInline.headId" clearable>
                <el-option
                  v-for="i in headidList"
                  :key="i.id"
                  :label="i.name"
                  :value="i.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item v-show="show">
              <el-button
                type="primary"
                icon="el-icon-search"
                @click="doSearch"
              >{{ $t("search") }}</el-button
              >
            </el-form-item>
            <el-form-item v-show="show">
              <span class="el-dropdown-link" @click="show = !show">
                {{ $t("retract") }}
                <i class="el-icon-arrow-up el-icon--right"/>
              </span>
            </el-form-item>
          </el-form>
        </div>
      </el-collapse-transition>
    </el-row>
  </div>
</template>
<script>
import workRecordApi from '@/api/production/workRecord'
import eqpJob from '@/api/equipment/eqpbase'
import { clearNull } from '@/utils/myTools'
import { pickTime } from '@/utils/pickTime'
export default {
  name: 'WorkRecordHeader',
  props: {
    listQuery: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      show: false,
      handleList: [],
      testList: [],
      headidList: [],
      formInline: {},
      trackinTime: pickTime(7)
    }
  },
  created() {
    this.getTestList()
    this.getHandleList()
    this.getWorkRecordInfo()
  },
  methods: {
    // 点击查询
    doSearch() {
      if (this.trackinTime !== null && this.trackinTime.length > 0) {
        this.formInline.startTime = this.trackinTime[0]
        this.formInline.endTime = this.trackinTime[1]
      } else {
        this.formInline.startTime = null
        this.formInline.endTime = null
      }
      const obj = clearNull(this.formInline)
      workRecordApi.searchInfo({ ...obj, ...this.listQuery }).then((res) => {
        this.$emit('initTable', res.data)
        this.$emit('initdataInfo', res)
      })
    },
    getTestList() {
      eqpJob.getTestList({ eqpType: 'TESTER' }).then((res) => {
        this.testList = res.data
      })
    },
    getHandleList() {
      eqpJob.getHandleList().then((res) => {
        this.handleList = res.data
      })
    },
    getHeadidList() {
      eqpJob.getHeadidList({ testerid: this.formInline.testerId }).then((res) => {
        this.headidList = res.data
      })
    },
    getWorkRecordInfo() {
      if (Object.keys(this.$route.query).length) {
        this.formInline = Object.assign({}, this.formInline, this.$route.query)
        this.doSearch()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
$inputWidth : 180px;
.el-row {
  padding: 10px;
  background-color: #fff;
}
.el-input{
  width: 150px;
}
.el-select {
  width: 150px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.el-input{
  width: $inputWidth;
}
.el-select {
  width: $inputWidth;
}
.el-date-editor.el-input {
  width: $inputWidth;
}
</style>
